<script setup>
import { ref,reactive } from 'vue'
import {defineExpose } from 'vue'
import addGroupModel from './addGroupModel.vue'
import MyIcon from '@/components/my-icon/index.vue'
import corpDetails from './corpDetails.vue'
import { Search } from '@element-plus/icons-vue'
import { postGroupinglist,postReplyList,postReplyGet,postReplyMove,postReplyDelgrouping,postReplyMovegrouping,postReplyDel,postReplyGetgrouping } from '@/api'
const props = defineProps({
	activeKey: Number,
	from:Object
})
const queryNmme = ref('')
const corpDetailsVisible = ref(false)
const dialogGroupVisible = ref(false)
const typeObj = {
	text: '文字'
}
const changeCorpDetailsVisible = (visible) => {
	corpDetailsVisible.value = visible
}
const formatDate = (d) => {
	var now = new Date(parseFloat(d))
	var year = now.getFullYear()
	var month = now.getMonth() + 1
	var date = now.getDate()
	if (month >= 1 && month <= 9) {
		month = '0' + month
	}
	if (date >= 0 && date <= 9) {
		date = '0' + date
	}
	var hour = now.getHours()
	var minute = now.getMinutes()
	var second = now.getSeconds()
	if (hour >= 1 && hour <= 9) {
		hour = '0' + hour
	}
	if (minute >= 0 && minute <= 9) {
		minute = '0' + minute
	}
	if (second >= 0 && second <= 9) {
		second = '0' + second
	}
	return year + '-' + month + '-' + date + ' ' + hour + ':' + minute + ':' + second
}
const staffList = ref([
	{
		id: 1,
		name: '赵梓豪',
		avatar: 'https://mpa.oss-cn-hangzhou.aliyuncs.com/weiban-prod/default-avatar.png'
	},
	{
		id: 2,
		name: '刘宏基',
		avatar: 'https://wework.qpic.cn/wwpic/31712_Jctq9i-IR1WFL8b_1664518793/60'
	}
])
const nowStaff = staffList.value[0]
// 话术上移
const popUp = (val) => {
	// if (index != 0) {
	// 	tableList.value[index] = tableList.value.splice(index - 1, 1, tableList.value[index])[0]
	// }
	postReplyMove({type:'up',id:val.id}).then(res=>{
		postReplyListapi()
	})
}
//话术下移
const popDown = (val) => {
	// if (index != tableList.value.length - 1) {
	// 	tableList.value[index] = tableList.value.splice(index + 1, 1, tableList.value[index])[0]
	// }
	postReplyMove({type:'down',id:val.id}).then(res=>{
		postReplyListapi()
	})
}
const tableList = ref([
	
])
const form=reactive({
	page:'1',
	size:'10',
	title:props.from.content,
	grouping_id:'',
	orders:props.from.sort
})
const groupList = ref([
	{
		grouping_name: "",
		id: 4,
		pid: 0,
		size: 0,
		son_grouping: []
	}
])
//获取分组列表数据
const postGroupinglistapi=()=>{
	postGroupinglist().then(res=>{
		groupList.value=res.data
		for(var i = 0;i<groupList.value.length;i++){
			groupList.value[i].show=true
		}
		if(groupList.value[0].son_grouping.length > 0){
			form.grouping_id=groupList.value[0].son_grouping[0].id
			postReplyListapi()
			// postReplyList({}).then(res=>{

			// })
		}else{
			postReplyListapi()
		}
	})
}
postGroupinglistapi()
const postReplyListapi = ()=>{
	postReplyList(form).then(res=>{
		tableList.value=res.data.item
		for(var i = 0;i<tableList.value.length;i++){
			if(tableList.value[i].welcome_data.length>1){
				tableList.value[i].show = true
			}
		}
	})
}
const checkapi=(val)=>{
	form.grouping_id=val.id
	postReplyListapi()
}
const groupingid=ref({
	grouping_name:"",
	son_grouping:[],
	id:''
})
// postReplyListapi()
const changeGroupVisible = (visible,id) => {
	if(id){
		postReplyGetgrouping({id:id}).then(res=>{
			groupingid.value.grouping_name=res.data.grouping_name
			groupingid.value.son_grouping=res.data.son_grouping
			groupingid.value.id=res.data.id
			dialogGroupVisible.value = visible
	postGroupinglistapi()
	})
	}else{
		groupingid.value.grouping_name=''
			groupingid.value.son_grouping=[]
			groupingid.value.id=''
			dialogGroupVisible.value = visible
	postGroupinglistapi()
	}
	console.log(visible)
	
}
const emits = defineEmits(['tableapiedit'])
const editlistitem = (val)=>{
	
	postReplyGet({id:val.id}).then(res=>{
		emits('tableapiedit', res.data)
	})
}
const show = (val)=>{
	console.log('--------------------');
	postGroupinglistapi()
	console.log(val)
}
const deletegrouping=(val)=>{
	ElMessageBox.confirm('确定要删除当前分组吗？', '提示', {
		type: 'warning',
		center: true
	}).then(() => {
		postReplyDelgrouping({id:val}).then(res=>{
			ElMessage({
				message: res.msg,
				type: 'success',
			})
			form.grouping_id=''
			postGroupinglistapi()
		})
	})
}
const upapi = (val,type)=>{
	postReplyMovegrouping({id:val,type:type}).then(res=>{
		ElMessage({
				message: res.msg,
				type: 'success',
			})
			postGroupinglistapi()
	})
}
const deletelistitem=(val)=>{
	ElMessageBox.confirm('确定要删除当前数据吗？', '提示', {
		type: 'warning',
		center: true
	}).then(() => {
		postReplyDel({id:val.id}).then(res=>{
		ElMessage({
				message: res.msg,
				type: 'success',
			})
			postReplyListapi()
	})
	})
	
}
const shower = ref(12222)
defineExpose({
	show,
	shower
})
</script>
<template>
	<div class="main">
		<div class="container-left">
			<div class="add-group-btn" v-if="props.activeKey === 1" @click="changeGroupVisible(true)">
				<div class="add-icon">
					<el-icon><Plus /></el-icon>
				</div>
				<span class="font-size-14">添加分组</span>
			</div>
			<div class="dropdown-wrap" v-if="props.activeKey === 3">
				<el-dropdown style="width: 100%" trigger="click">
					<div class="sidebar-header">
						<div class="sidebar-img">
							<img :src="nowStaff.avatar" class="avatar-img" />
							{{ nowStaff.name }}
						</div>
						<el-icon class="el-icon--right">
							<arrow-down />
						</el-icon>
					</div>
					<template #dropdown>
						<div class="dropMuen">
							<p>全部成员（{{ staffList.length }}）</p>
							<el-input
								style="width: 100%; height: 36px"
								v-model="queryNmme"
								class="w-50 m-2"
								placeholder="输入成员后回车"
								:suffix-icon="Search"
							/>
							<el-dropdown-menu>
								<el-dropdown-item v-for="item in staffList" :key="item.id">
									<div class="draw-item">
										<div class="sidebar-img">
											<img :src="item.avatar" class="avatar-img" />
											{{ item.name }}
										</div>
									</div>
								</el-dropdown-item>
							</el-dropdown-menu>
							<p class="no-more">没有更多了~</p>
						</div>
					</template>
				</el-dropdown>
			</div>
			<div class="group-list">
				<div v-for="item in groupList" :key="item.id">
					<div class="group-item"  @click="checkapi(item)">
						<el-icon @click="item.show = !item.show" v-if="!item.show"><ArrowDownBold /></el-icon>
						<el-icon @click="item.show = !item.show" v-if="item.show"><ArrowUpBold /></el-icon>
						<el-icon class="folder-icon"><FolderOpened /></el-icon>
						{{ item.grouping_name }} <span style="color: #00000070">（{{ item.son_grouping.length }}）</span>
						<span style="float: right;">
							<el-dropdown trigger="click" >

							<div class="dropdown-edit">
								<el-icon class="more-icon"><MoreFilled /></el-icon>
							</div>
							<template #dropdown>
								<el-dropdown-menu>
									<el-dropdown-item @click="changeGroupVisible(true,item.id)">修改</el-dropdown-item>
									<el-dropdown-item @click="deletegrouping(item.id)">删除</el-dropdown-item>
									<el-dropdown-item @click="upapi(item.id,'up')">上移</el-dropdown-item>
									<el-dropdown-item @click="upapi(item.id,'down')"
										>下移</el-dropdown-item
									>
								</el-dropdown-menu>
							</template>
							</el-dropdown>
						</span>
						
					</div>
					<div :class="form.grouping_id == chilld.id ? 'sortable-item bgcser' : 'sortable-item'" v-for="(chilld, index) in item.son_grouping" :key="index" @click="checkapi(chilld)" v-if="item.show">
						<div class="flex-row">
							<el-icon class="folder-icon"><FolderOpened /></el-icon> {{ chilld.grouping_name }}
						</div>
						<el-dropdown trigger="click">
							<div class="dropdown-edit">
								<el-icon class="more-icon" sty><MoreFilled /></el-icon>
							</div>
							<template #dropdown>
								<el-dropdown-menu>
									<el-dropdown-item @click="changeGroupVisible(true,chilld.id)">修改</el-dropdown-item>
									<el-dropdown-item @click="deletegrouping(chilld.id)">删除</el-dropdown-item>
									<el-dropdown-item @click="upapi(chilld.id,'up')">上移</el-dropdown-item>
									<el-dropdown-item @click="upapi(chilld.id,'down')"
										>下移</el-dropdown-item
									>
								</el-dropdown-menu>
							</template>
						</el-dropdown>
					</div>
				</div>
			</div>
		</div>
		<div class="container-right" style="padding:15px;border-radius: 5px;">
			<el-scrollbar height="100%">
				<div class="container-right-header" v-if="props.activeKey === 3">
					<p>共{{ tableList.length }}条话术</p>
					<el-input
						style="width: 216px; height: 36px"
						v-model="queryNmme"
						class="w-50 m-2"
						placeholder="请输入话术内容"
						:suffix-icon="Search"
					/>
				</div>
				<el-table :data="tableList" style="width: 100%">
					<el-table-column label="话术内容" width="200px">
						<!-- <template #default="scope"> -->
							<!-- <div :class="scope.row.expand ? ' text-inner expanded' : 'text-inner'"> -->
								<!-- <div class="inner" :id="'inner' + scope.$index">
									{{ scope.row.welcome_data[0].text ? scope.row.welcome_data[0].text : '-' }}
								</div> -->
							<!-- </div> -->
							<!-- <div
								class="down-icon"
								v-if="scope.row.welcome_data[0].text.length > 35"
								@click="scope.row.expand = !scope.row.expand"
							> -->
								<!-- {{ scope.row.expand ? '收起' : '展开' }} -->
								<!-- <el-icon style="margin-left: 5px; margin-top: 1px"
									><ArrowDown v-if="!scope.row.expand" /><ArrowUp v-if="scope.row.expand"
								/></el-icon> -->
							<!-- </div>

							<p class="font-color-black-45">共 {{ scope.row.welcome_data.length }} 条</p>
						</template> -->
						<template #default="scope">
							<div>
								<div>
									<div style="color: #409eff">[共{{scope.row.welcome_data.length}}条数据]</div>
									
								</div>
								<span>{{ scope.row.title }}</span>
								
							</div>
							<div v-if="scope.row.show">
								<div v-if="scope.row.welcome_data.length!=0">
									<div class="app-flex-left" style="margin-top:10px" v-for="(item,index) in scope.row.welcome_data" :key="index">
										<el-avatar shape="square" :src="item.link_image_url" size="50" v-if="item.link_image_url" />
										<video v-if="item.video_url" :src="item.video_url" style="width: 320px; height: 100px; " controls="controls" id="upvideo"></video>
										<span style="display:inline-block;margin-left:10px">{{item.text||item.link_title||item.miniprogram_title||item.file_name}}</span>
									</div>
								</div>
							</div>
							
							<div style="color: #409eff;cursor:pointer;" @click="scope.row.show = !scope.row.show">{{scope.row.show ? '关闭':'展开'}}</div>
						</template>
					</el-table-column>
					<el-table-column prop="name" label="标题" width="280">
						<template #default="scope">
							{{ scope.row.title ? scope.row.title : '-' }}
						</template>
					</el-table-column>
					<el-table-column>
						<template #header>
							<div class="time-box">
								发送次数
								<el-tooltip placement="top" effect="light">
									<template #content>
										<p style="font-size: 14px; padding: 10px">发送次数自本功能上线后开始统计</p>
									</template>
									<MyIcon class="question-icon" name="Question"
								/></el-tooltip>
							</div>
						</template>
						<template #default="scope">
							{{ scope.row.size ? scope.row.size : '-' }}
						</template>
					</el-table-column>
					<el-table-column label="创建人" width="180">
						<template #default="scope">
							{{ scope.row.staff_name ? scope.row.staff_name : '-' }}
						</template>
					</el-table-column>
					<el-table-column label="创建时间" width="220">
						<template #default="scope">
							{{ scope.row.ctime }}
						</template>
					</el-table-column>
					<el-table-column label="类型" prop="type" width="80">
						<!-- <template #default="scope"> {{ typeObj[scope.row.type] }} </template> -->
					</el-table-column>
					<el-table-column align="center" label="操作" fixed="right" width="220">
						<template #default="scope">
							<div class="btn-group" v-if="props.activeKey === 1">
								<span @click="popUp(scope.row)" :class="scope.$index === 0 ? 'btn-blue-none' : 'btn-blue'"
									>上移</span
								>
								<el-divider direction="vertical" />
								<span
									@click="popDown(scope.row)"
									:class="scope.$index === tableList.length - 1 ? 'btn-blue-none' : 'btn-blue'"
									>下移</span
								>
								<el-divider direction="vertical" />
								<el-dropdown trigger="click">
									<div class="dropdown-edit">
										编辑<el-icon style="margin-left: 5px"><CaretBottom /></el-icon>
									</div>
									<template #dropdown>
										<el-dropdown-menu>
											<el-dropdown-item @click="editlistitem(scope.row)">修改</el-dropdown-item>
											<el-dropdown-item @click="deletelistitem(scope.row)">删除</el-dropdown-item>
										</el-dropdown-menu>
									</template>
								</el-dropdown>
							</div>
							<div v-if="props.activeKey === 3" class="btn-group">
								<span @click="changeCorpDetailsVisible(true)" class="btn-blue">发送详情 </span>
							</div>
						</template>
					</el-table-column>
				</el-table>
			</el-scrollbar>
		</div>
		<corpDetails :corpDetailsVisible="corpDetailsVisible" @changeCorpDetailsVisible="changeCorpDetailsVisible" />
		<addGroupModel :width="'700px'" v-if="dialogGroupVisible" :id="groupingid" :dialogGroupVisible="dialogGroupVisible" @changeGroupVisible="changeGroupVisible" />
	</div>
</template>
<style lang="scss" scoped>
.more-icon {
					font-size: 13px;
					color: #494848a6;
					transform: rotateZ(-90deg);
					// display: none;
				}
.bgcser{
	background-color: #effaff;
}
.font-color-black-45 {
	font-size: 13px;
	color: rgba(0, 0, 0, 0.45);
}
.dropMuen {
	width: 300px;
	padding: 10px;
	p {
		font-size: 14px;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #595959;
		line-height: 22px;
		margin: 10px 0;
	}
	.no-more {
		text-align: center;
		font-size: 14px;
		color: rgba(0, 0, 0, 0.45);
	}
}
.down-icon {
	display: flex;
	align-items: center;
	font-size: 13px;
	color: #222222d9;
	cursor: pointer;
}
.text-inner {
	font-size: 13px;
	max-height: 54px;
	line-height: 18px;
	color: #333;
	overflow: hidden;
}
.question-icon {
	margin-left: 5px;
	font-size: 13px;
	cursor: pointer;
}
.time-box {
	display: flex;
	align-items: center;
}
.flex-row {
	display: flex;
	align-items: center;
}
.main {
	display: flex;
	justify-content: space-between;
	width: 100%;
	height: 100%;
	.container-left,
	.container-right {
		height: 100%;
		background-color: #fff;
		:deep(.el-table tr) {
			color: rgba(65, 66, 74, 0.85);
		}
	}
	.container-left {
		width: 14%;
		.dropdown-wrap {
			display: flex;
			align-items: center;
			height: 42px;
		}
		.sidebar-header {
			display: flex;
			align-items: center;
			justify-content: space-between;
			width: 100%;
			padding: 0 24px;
			cursor: pointer;
			.sidebar-img {
				display: flex;
				align-items: center;
			}
			.avatar-img {
				width: 25px;
				height: 25px;
				margin-right: 5px;
			}
		}
		.add-group-btn {
			display: flex;
			align-items: center;
			width: 100%;
			height: 49px;
			padding: 0 24px;
			font-size: 14px;
			color: #9baebf;
			border-bottom: 1px dashed #ededed;
			cursor: pointer;
		}
		.group-list {
			min-height: 0;
			.group-item,
			.sortable-item {
				position: relative;
				display: flex;
				align-items: center;
				width: 100%;
				height: 40px;
				padding: 10px 9px 10px 24px;
				margin-bottom: 10px;
				font-size: 14px;
				color: #000000a6;
				cursor: pointer;
				.drap-box {
					position: absolute;
				}
				.folder-icon {
					margin-right: 5px;
					font-size: 16px;
					color: #1890ff;
				}
			}
			.sortable-item {
				justify-content: space-between;
				flex-basis: 100%;
				padding: 10px 9px 10px 44px;
				.more-icon {
					font-size: 13px;
					color: #494848a6;
					transform: rotateZ(-90deg);
					display: none;
				}
			}
			.group-item:hover,
			.sortable-item:hover {
				background: #effaff;
			}
			.sortable-item:hover .more-icon {
				display: block;
			}
		}
		.add-icon {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 14px;
			height: 14px;
			background-color: #9baebf;
			margin-right: 5px;
			font-size: 14px;
			color: #fff;
		}
	}

	.btn-group {
		display: flex;
		align-items: center;
		justify-content: flex-end;
		width: 100%;
		height: 100%;
		padding: 16px 15px;
		:deep(.el-divider--vertical) {
			margin: 0 12px;
		}

		.dropdown-edit {
			display: flex;
			align-items: center;
			color: #1890ff;
			cursor: pointer;
		}
		.btn-blue {
			color: #1890ff;
			cursor: pointer;
		}
		.btn-blue-none {
			color: #1890ff;
			opacity: 0.7;
		}
	}
	.container-right {
		width: 85.5%;
		padding-bottom: 20px;
		.container-right-header {
			width: 100%;
			display: -webkit-box;
			display: flex;
			padding: 16px 24px;
			-webkit-box-align: center;
			align-items: center;
			-webkit-box-pack: justify;
			justify-content: space-between;
			background: #fff;
			box-shadow: 0 1px 3px 0 rgb(0 0 0 / 5%);
			border-radius: 2px 2px 0 0;
			border-bottom: 1px solid #ebeef5;
			p {
				font-size: 16px;
				font-weight: 600;
				color: #333;
				line-height: 22px;
			}
		}
		.expanded {
			max-height: unset;
		}
	}
}
</style>
